import React, { useState, useEffect } from 'react';
// import LineOfSight from '../../../widgets/LineOfSight';
import LineOfSight from '@/components/widgets/LineOfSight';
import ElevationProfile from '@/components/widgets/ElevationProfile';
import styles from './index.less';
import { useDispatch, useSelector } from 'umi';
import kls from 'classnames';
import RainEffect from '@/components/widgets/RainWater/RainEffect/index.jsx';
import { Select } from 'antd';

const Right = function() {
  const [isShowRain, setIsShowRain] = useState(false);
  const scenesView = useSelector(store => store.scheme.scenesView) || {};
  const weatherOption = [
    {
      value: 'select',
      label: '请选择',
      weather: {
        type: 'sunny',
        cloudCover: 0.8,
      },
    },
    {
      value: 'sunny',
      label: '晴天',
      weather: {
        type: 'sunny',
        cloudCover: 0.8,
      },
    },
    {
      value: 'cloudy',
      label: '多云',
      weather: {
        type: 'cloudy',
        cloudCover: 0.5,
      },
    },
    {
      value: 'rainy',
      label: '下雨',
      weather: {
        type: 'rainy',
        cloudCover: 0.8,
        precipitation: 0.5,
      },
    },
    {
      value: 'foggy',
      label: '雾天',
      weather: {
        type: 'foggy',
        fogStrength: 0.5,
      },
    },
    {
      value: 'snowy',
      label: '下雪',
      weather: {
        type: 'snowy',
        cloudCover: 0.8,
        precipitation: 0.3,
        snowCover: 'enabled',
      },
    },
    {
      value: 'thunderRain',
      label: '雷雨',
    },
  ];
  function handleChange(value) {
    weatherOption.map(i => {
      if (value === 'thunderRain') {
        scenesView.environment.weather = {
          type: 'rainy',
          cloudCover: 0,
          precipitation: 0,
        };
        setIsShowRain(true);
      } else if (i.value === value) {
        setIsShowRain(false);
        scenesView.environment.weather = i.weather;
      }
    });
  }
  return (
    <>
      <div style={{ position: 'absolute', right: 88, top: 144, zIndex: 10 }}>
        <div className="side-panel2" style={{ marginBottom: 16, position: 'relative' }}>
          <div className="side-panel2-title"> 视线分析</div>
          <div
            className={kls('side-panel2-body', styles.lineOfSight)}
            style={{
              padding: '16px 34px',
            }}
          >
            <LineOfSight />
          </div>
        </div>
        <div className="side-panel2" style={{ position: 'relative', marginBottom: 16 }}>
          <div className="side-panel2-title"> 高程剖面</div>
          <div
            className={kls('side-panel2-body')}
            style={{
              padding: '0 34px 16px',
              position: 'relative',
            }}
          >
            <ElevationProfile />
          </div>
        </div>

        <div className="side-panel2" style={{ position: 'relative' }}>
          <div className="side-panel2-title"> 天气特效</div>
          <div
            className={kls('side-panel2-body')}
            style={{
              padding: '16px 34px',
              position: 'relative',
            }}
          >
            <Select
              defaultValue="select"
              style={{ width: '100%' }}
              onChange={handleChange}
              options={weatherOption}
            />
          </div>
        </div>
      </div>
      {isShowRain && (
        <RainEffect
          style={{
            width: '100vw',
            height: '100vh',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 1,
          }}
        />
      )}
    </>
  );
};

export default Right;
